Vue.component('Detail', {
  template: `
		<el-dialog :title="data.goods_name" width="830px" class="icon-dialog" :visible.sync="show" @open="dlgInit" :before-close="doClose" append-to-body>
			<div id="goods_form_app">
      <div class="flex">
        <div v-for="(item,index) in data.goods_img_arr" :key="index" style="padding-right:5px;">
          <el-image :src="item" :preview-src-list="data.goods_img_arr" style=" height: 100px; width:100px; border-radius:5px; position:absoti"></el-image>
        </div>
      </div>
      
      <div class="tabBar cl" style=" position: sticky; top: -10px; z-index: 1; background: #fff;">
        <span :class="{current:config.group==1}" @click="config.group=1">详情介绍</span>
        <span :class="{current:config.group==2}" @click="config.group=2">型号规格</span>
      </div>
			<div style="min-height:200px; padding-top:10px;">
        <template v-if="config.group==1">
        <el-form :size="size" ref="data" :model="data" :label-width=" 1?'90px':'16%'">
          <div class="flex">
            <el-form-item style="width:25%;" label="分类：" prop="cate_id">
              <template v-for="item in cate_arr"><span :key="item.id" v-if="data.cate_id==item.id">{{item.name}}</span></template>
            </el-form-item>
            <el-form-item style="width:25%;" label="品牌：" prop="品牌">
              {{data.品牌}}
            </el-form-item>
            <el-form-item style="width:25%;" label="价格：" prop="shop_price">
              {{data.shop_price}}
            </el-form-item>
            <el-form-item style="width:25%;" label="市场价格：" prop="market_price">
              {{data.market_price}}
            </el-form-item>
            <el-form-item style="width:25%;" label="限领数量：">
              {{data.buy_max}}
            </el-form-item>
            <el-form-item style="width:25%;" label="库存数量：" prop="goods_number">
              {{data.goods_number}}
            </el-form-item>
            <el-form-item style="width:25%;" label="库存告警：" prop="warn_number">
              {{data.warn_number}}
            </el-form-item>
            <el-form-item style="width:25%;" label="供货方：" prop="supplier">
            {{data.supplier}}
            </el-form-item>
          </div>
          
          <div class="flex">
            <el-form-item v-if="data.org_id" style="width:50%;" label="限领单位：" prop="org_id">
              <template v-for="item in org_arr"><span :key="item.id" v-if="data.org_id==item.id">{{item.name}}</span></template>
            </el-form-item>
          </div>

          <div v-html="data.content"></div>
        </el-form>
        </template>


        <template v-if="config.group==2">
          <el-form :size="size" ref="order" :model="order" :label-width=" 1?'90px':'16%'">
            <el-form-item label="规格：" prop="sku">
              <template v-for="(item,i) in data.sku">
                <el-tag v-if="item.name == order.sku_name" effect="dark" :key="i" type="primary">{{item.name}}</el-tag>
                <el-tag v-else style="cursor:pointer;" @click='order.sku = item' :key="i" type="primary">{{item.name}}</el-tag>
              </template>
            </el-form-item>

            <el-form-item label="领取数量：" prop="cate_id">
              <el-input-number size="mini" v-model="order.buy_num" :min="1" :max="data.buy_max" label="数量"></el-input-number>
            </el-form-item>
           
            <el-form-item label="价格：" prop="cate_id">
              ¥ <span style="color:red;font-size:20px;">{{order.amount}}</span>
            </el-form-item>
          </el-form>
        </template>
			</div>

      <div class="padding" style="position: sticky; bottom: 0;padding-top:10px;">
        <el-button type="primary" @click="doAddCart">加入购物车</el-button>
        <el-button type="warning" @click="doClose">关闭</el-button>
      </div>
    </div>
		</el-dialog>
	`
  ,
  components: {
    'treeselect': VueTreeselect.Treeselect,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    info: {
      type: Object,
    },
  },
  data() {
    return {
      current: 1,
      org_arr: [],
      data: {
      },
      order: {
        sku_name: '', buy_num: 1,
        sku: null,
        amount: 0.00
      },
      cate_arr: [],
      config: {
        group: 1
      },
      search: [],
      result: { list: {}, pageInfo: {} }
    }
  },
  watch: {
    "order": {
      handler(val, oldVal) {
        if (!val.sku) {
          val.sku = this.data.sku[0]
        }

        val.amount = val.buy_num * val.sku.price
        val.sku_name = val.sku.name
        val.sku_price = val.sku.price
      },
      deep: true //true 深度监听
    },
    show(val) {
      let that = this

      if (val) {
        this.data = this.info

        axios.post('/admin/goods/cateList.html', param).then(res => {
          if (res.data.status == 200) {
            that.cate_arr = res.data.data.data
          } else {
            that.$message.error(res.data.msg);
          }
        })

        axios.post('/admin/org/index.html', param).then(res => {
          if (res.data.status == 200) {
            that.org_arr = res.data.data.data
          } else {
            that.$message.error(res.data.msg);
          }
        })

        let id = this.data.id
        axios.post('/admin/goods/getUpdateInfo', {
          id: id
        }).then(res => {
          if (res.data.status == 200) {
            this.data = res.data.data
            this.data.goods_img_other = JSON.parse(this.data.goods_img_other)
            this.data.pack = JSON.parse(this.data.pack)
            this.data.sku = JSON.parse(this.data.sku)

            if (!this.data.buy_max) {
              this.data.buy_max = 1000
            }

            this.data.goods_img_arr = []
            this.data.goods_img_arr.push(this.data.goods_img)
            this.data.goods_img_other.forEach(element => {
              this.data.goods_img_arr.push(element)
            });


            this.order.sku = this.data.sku[0]

          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  },
  methods: {
    doAddCart() {
      if (this.config.group != 2) {
        this.config.group = 2
        return
      }

      let orderData = {
        goods_id: this.data.id,
        goods_name: this.data.goods_name,
        amount: this.order.amount,
        buy_number: this.order.buy_num,
        sku_name: this.order.sku_name,
        goods_price: this.order.sku_price,
        goods_img: this.data.goods_img,
      }

      axios.post('/user/cart/add', orderData).then(res => {
        if (res.data.status == 200) {
          this.$message({
            type: 'success',
            message: "已添加到购车"
          })
          this.$emit('on-success', '')
        } else if (res.data.status == 403) {
          this.$alert(res.data.msg, {
            type: 'error',
          })
        } else {
          this.$message("出错了！" + JSON.stringify(res.data))
        }
      })
    },
    doClose() {
      this.$emit('on-success', '')
    },
    dlgInit() {
      // if (this.formDataId > 0) {
      //   this.$http.post('goods/goods_get', { id: this.formDataId }).then(resp => {
      //     this.data = resp.data

      //     if (resp.data.content == null) {
      //       this.$refs.editor.setContent('')
      //     } else { this.$refs.editor.setContent(resp.data.content) }
      //   })
      // } else {
      //   this.data = {}
      // }
    },
  }
})
